<template>
  <div class="progress" v-if="stepProgress.data&&stepProgress.data.length!=0">
    <div class="step-title" v-if="stepProgress.mailNo">{{ stepProgress.expTextName+stepProgress.mailNo }}</div>
    <div class="step-list" >
        <ul>
          <li v-for="(item, index) in stepProgress.data" :key="index" v-bind:class="[index==0 ? 'current-active' : '']">
            <div class="step-time" >{{ item.dataTime }}<br>{{ item.year }}</div>
            <div class="step-content" >{{item.context}}</div>
          </li>
        </ul>

    </div>
  </div>
  <div  v-else>
        <h5>{{stepProgress.data?stepProgress.msg:'暂无信息'}}</h5>
  </div>
</template>

<script>
export default {
  name: 'step-progress',
  props: {
    // 传递步骤参数
    stepProgress: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.step-list:after, .step-list ul li:after {
  clear: both;
  display: table;
  content: '';
}
.step-title{
  font-size: 16px;
  font-weight: bold;
  color: #4168E7;
  padding-left: 145px;
  margin-bottom: 20px;
}
.step-list{
  ul{
    li{
      font-size: 14px;
      line-height: 160%;
      .step-time,.step-content{float: left;}
      .step-time{
        text-align: right;
        margin-right: 20px;
        width: 100px;
      }
      .step-content{
        width: calc( 100% - 145px);
        border-left: 3px solid #f8f8f8;
        padding: 0 0 35px 20px;
        position: relative;
        //text-indent: 16px;
        &:before{
          content: '';
          border: 3px solid #f3f3f3;
          background-color: #d9d9d9;
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 5px;
          position: absolute;
          top: 0px;
          left: -6px;
        }
        .reviewer{
          span{
            &:nth-child(2){
              float: right;
              width: 54px;
              height: 24px;
              background-color: rgba(18, 171, 98, 0.1);
              color: #12AB62;
              border-radius: 4px;
              text-align: center;
              font-size: 14px;
              font-weight: inherit;
            }
          }
          span.success{

          }
          span.fail{
            color: #F33F3F;
            background-color: rgba(243, 63, 63, 0.1);
          }

        }
      }
      &:last-child .step-content{
        border-left: none;
      }
    }
    li.current-active{
      font-weight: bold;
      font-size: 16px;

      //color: #2D7EDF;
      .step-content{
        &:before{
          border: 3px solid #bdd5ff;
          background-color: #2D7EDF;
        }
      }
    }
    .current-active ~ li {
      color: #cccccc;
      .step-content{
        .reviewer{
          span{
            &:nth-child(2){
              color: #FFFFFF;
              background-color: #CCCCCC;
              &:before{
                content: '待审批';
              }
            }
          }
        }
      }
    }
  }

}
 h5{
    text-align: center;
    margin: 0 auto 10px auto;
  }
</style>
